<template>


  <div id="myCharts" :style="{ width: '500px', height: '500px' }"></div>
</template>

<script>
export default {
  // 可以理解为注册绑定参数，并赋默认值
  props: {
    ectitle: {},
    strokeWidth: {},
    ecdata: {},
    eccolor: [],
  },
  mounted() {
    //this.$root => app
    console.log(this);
    let myCharts = this.$echarts.init(document.getElementById("myCharts"));
    // 绘制图表
    myCharts.setOption({
      title: { text: this.strokeWidth, left: this.ectitle },
      tooltip: {
        trigger: "item",
      },
      color: this.eccolor,
      legend: {
        top: "6%",
        left: "left",
      },
      series: [
        {
          type: "pie",
          radius: ['40%', '70%'],
          data: this.ecdata,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    });
  },
};
</script>

<style lang="scss" scoped>
</style>